<template>
    <div>
        <yh-dialog drag :visible.sync="visibleTemp" width="500px" @close="closeModal" :close-on-click-modal="false">
            <template slot="title">
                删除范围指标
            </template>
            <div>
                <p>{{ list.join(' , ') }}</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeModal">取 消</el-button>
                <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </yh-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import { deleteOriginalBound } from '@/pages/quota/api';
import { DELETE_CACHE } from '@/utils/user-util';
import { DELETE_LOCAL_CACHE } from '@/utils/diction-const-util';

@Component({ name: 'RangeIndicatorsDelete' })
export default class RangeIndicatorsDelete extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop({ default: () => [] }) list: any[];

    private visibleTemp = false;

    @Watch('visible')
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    // 关闭弹窗
    closeModal() {
        this.syncVisible = false;
    }

    onSubmit() {
        const data = this.list;
        deleteOriginalBound(data).then(res => {
            DELETE_CACHE('BoundCfg');
            DELETE_LOCAL_CACHE('CalculateFactor');
            this.yh_message_success('删除成功');
            this.$emit('on-submit');
            this.closeModal();
        });
    }
}
</script>
